// let tabli = document.querySelectorAll('.tab-list>li'); //数组
// let goodsul = document.querySelectorAll('.goods-list')
// console.log(goodsul);
// 	for(let i=0;i<tabli.length;i++){
// 		tabli[i].addEventListener('mouseenter',function(){ //这个循环我们是给每一个li绑定了一个事件

// 			//在我鼠标浮动到这个li上的时候，我让所有goodslist--ul 都去掉list-active
// 			for (let i = 0; i < tabli.length; i++) {
// 				goodsul[i].className = 'goods-list'
// 			}
// 		})
// 	}
// console.log(tabli);
window.onload = function() {  //等所有dom元素都加载完成后再执行，这里的代码


	// 1/首先先获取一共有几个商品展示模块
	let wrap = document.querySelectorAll('.goodsshow-wrap'); //这里跟我们css是一样的
	// 2 我们要获取每一个模块中的tabli ul

	for (let i = 0; i < wrap.length; i++) {
		let tabli = wrap[i].querySelectorAll('.tab-list>li');
		let goodsul = wrap[i].querySelectorAll('.goods-list');
		// 3 获取到每个模块中的导航li 后,给他们添加鼠标进入事件监听
		for (let i = 0; i < tabli.length; i++) {
			tabli[i].addEventListener('mouseenter', function() {
				//在我鼠标浮动到这个li上的时候，我让所有goodslist--ul 都去掉list-active
				console.log('goods');
				for (let i = 0; i < tabli.length; i++) {
					tabli[i].className = ''
					goodsul[i].className = 'goods-list'; //display :none
				}
				tabli[i].className = 'item-active';
				goodsul[i].className = 'goods-list list-active'; //display:block
			})
		}
	}
}
